<template>
  <view class="page">
    <Head
      @rightClick="addNewCard"
      :isBack="false"
    >
      <block slot="right">
        <image
          src="http://cdn.gtfy.net.cn/1inex/bank/add.svg"
          class="add-icon"
          mode="scaleToFill"
        />
      </block>
    </Head>
    <!-- 新版银行卡 -->
    <view class="cards">
      <text class="txt1">银行卡</text>
      <text class="txt2"
        >目前已绑定<span>{{ list.length }}</span
        >张银行卡</text
      >
    </view>
    <view
      class="none"
      v-if="list.length === 0 && !loading"
    >
      <image
        src="http://cdn.gtfy.net.cn/1inex/cardNone1.png"
        class="noneImg"
      ></image>
      <view class="noneContent">您还没有添加银行卡哦，快去添加吧~</view>
      <view
        class="noneBtn"
        @tap="addNewCard"
        >去添加</view
      >
    </view>
    <view
      class="card"
      v-for="(item, i) in list"
      :key="item.id"
      :class="[parseCardType(item)]"
      @click="choiceItem(item)"
    >
      <image
        :src="parseCardTypeLogo(item)"
        class="logo"
        mode="scaleToFill"
      />
      <view class="top">
        <!-- 小图标+银行名 -->
        <view class="icon-name">
          <image
            :src="parseCardTypeIco(item)"
            class="ico"
            mode="scaleToFill"
          />
          <view class="name">
            <text class="line1">{{ item.bankName }}</text>
            <text class="line2">储蓄卡</text>
          </view>
        </view>

        <!-- 编辑按钮 -->
        <button
          class="edit-btn"
          @click.stop="editBankCard(i)"
        >
          编辑卡片
        </button>
      </view>

      <view class="bottom">
        <image
          src="http://cdn.gtfy.net.cn/1inex/bank/card_hidden.svg"
          mode="scaleToFill"
        />
        <image
          src="http://cdn.gtfy.net.cn/1inex/bank/card_hidden.svg"
          mode="scaleToFill"
        />
        <image
          src="http://cdn.gtfy.net.cn/1inex/bank/card_hidden.svg"
          mode="scaleToFill"
        />
        <text>{{ parseCardEndNo(item) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { userInfoAPI } from "@/api/login.js";
import { bankList } from "@/api/bank.js";

import Head from "@/components/Head/index";

export default {
  components: {
    Head,
  },
  data() {
    return {
      list: [],
      loading: true,
      skeleton: ["news", "line"],
      mode: "",
    };
  },
  onNavigationBarButtonTap(e) {
    this.toUrl("/pages/my/addCard");
  },
  created() {},
  onLoad(options) {
    // this.getinfo()
    if (options && options.mode && options.mode === "choice") {
      this.mode = "choice";
    }
  },
  computed: {
    parseCardEndNo() {
      return (card) => {
        return card.bankNo.substring(card.bankNo.length - 4, card.bankNo.length);
      };
    },
    parseCardTypeLogo() {
      return (card) => {
        if (card.bankName.indexOf("建设银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/jh_big.svg";
        } else if (card.bankName.indexOf("农业银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/nh_big.svg";
        } else if (card.bankName.indexOf("招商银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/zs_big.svg";
        } else if (card.bankName.indexOf("工商银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/gs_big.svg";
        } else {
          return "http://cdn.gtfy.net.cn/1inex/bank/bd_big.svg";
        }
      };
    },
    parseCardTypeIco() {
      return (card) => {
        if (card.bankName.indexOf("建设银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/jh.svg";
        } else if (card.bankName.indexOf("农业银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/nh.svg";
        } else if (card.bankName.indexOf("招商银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/zs.svg";
        } else if (card.bankName.indexOf("工商银行") !== -1) {
          return "http://cdn.gtfy.net.cn/1inex/bank/gs.svg";
        } else {
          return "http://cdn.gtfy.net.cn/1inex/bank/bd.svg";
        }
      };
    },
    parseCardType() {
      return (card) => {
        if (card.bankName.indexOf("建设银行") !== -1) {
          return "jsyh";
        } else if (card.bankName.indexOf("农业银行") !== -1) {
          return "nyyh";
        } else if (card.bankName.indexOf("招商银行") !== -1) {
          return "zsyh";
        } else if (card.bankName.indexOf("工商银行") !== -1) {
          return "gsyh";
        } else {
          return "other";
        }
      };
    },
  },
  onShow() {
    this.getData();
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    choiceItem(card) {
      if (this.mode === "choice") {
        uni.setStorageSync("choiceCard", JSON.stringify(card));
        uni.navigateBack({
          delta: 1,
        });
      } else {
        console.log("mode 不是 choice");
      }
    },
    addNewCard() {
      if (this.list.length < 5) {
        this.toUrl("/pages/my/addCard");
      } else {
        uni.showToast({
          title: "最多添加5张银行卡",
          icon: "none",
          mask: true,
        });
      }
    },
    /**
     * 设置银行卡信息
     * @param {*} index
     */
    editBankCard(index) {
      console.log("edit bank card");
      uni.setStorageSync("editBank", JSON.stringify(this.list[index]));
      this.toUrl("/pages/my/addCard?mode=edit");
    },
    /**
     * 获取银行卡信息列表
     */
    async getData() {
      let res = await bankList();
      if (res.code == 200) {
        this.list = res.data;
        this.loading = false;
      }
      // .then((res) => {
      //   console.log("res", res);

      //   if (Array.isArray(res)) {
      //     this.list = res;
      //   }
      //   this.loading = false;
      // })
      // .catch((err) => {
      //   this.loading = false;
      // });
    },
    /**
     * 从用户信息里获取银行卡 ,已弃用
     */
    getinfo() {
      userInfoAPI().then((res) => {
        this.userobj = res;
        var data = {
          bankNo: res.bankNo,
          bankName: res.bankName,
        };
        if (res.bankNo) {
          this.list.push(data);
        }

        this.loading = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .cu-bar {
  z-index: 100;
}

.page {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f6f6f6;

  .left-arrow-icon {
    width: 20rpx;
    height: 36rpx;
  }

  .add-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .cards {
    width: 100%;
    height: 185rpx;

    box-sizing: border-box;
    padding: 0 49rpx;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: flex-start;

    margin: 156rpx 0 30rpx 0;

    .txt1 {
      height: 48rpx;
      font-size: 48rpx;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
      font-weight: bold;
      color: #333333;
    }

    .txt2 {
      height: 28rpx;
      font-size: 28rpx;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
      font-weight: bold;
      color: #333333;

      span {
        // color: #225ed1;
        color: $price;
      }
    }
  }

  .none {
    text-align: center;

    .noneImg {
      width: 531rpx;
      height: 254rpx;
      margin-top: 156rpx;
    }

    .noneContent {
      font-size: 28rpx;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
      font-weight: 500;
      color: #999999;
      margin: 80rpx 0 73rpx 0;
    }

    .noneBtn {
      width: 510rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;
      margin: 0 auto;
      color: #ffffff;
      // background: linear-gradient(-13deg, #2b6bd4 0%, #0c5bdc 100%);

      background: linear-gradient(-15deg, $price 0%, #ff5b50 100%);
      border-radius: 50rpx;
    }
  }

  .card {
    width: 690rpx;
    height: 220rpx;

    margin-bottom: 20rpx;
    overflow: hidden;
    position: relative;

    box-sizing: border-box;
    padding: 40rpx 67rpx;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;

    .logo {
      width: 200rpx;
      height: 200rpx;
      position: absolute;
      bottom: -24rpx;
      right: -23rpx;
    }

    .top {
      width: 100%;

      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: flex-start;

      .icon-name {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: flex-start;

        .ico {
          width: 33rpx;
          height: 33rpx;
          margin-right: 14rpx;
        }

        .name {
          height: 61rpx;

          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          align-items: flex-start;

          .line1 {
            height: 28rpx;
            font-size: 28rpx;
            font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
            font-weight: 500;
            color: #ffffff;
            margin-bottom: 12rpx;
          }

          .line2 {
            height: 24rpx;
            font-size: 24rpx;
            font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      .edit-btn {
        min-width: 146rpx;
        height: 52rpx;
        background: rgba(7, 82, 214, 0);
        border: 1rpx solid #ffffff;
        border-radius: 26rpx;
        text-align: center;
        line-height: 52rpx;
        font-size: 24rpx;
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
        font-weight: 500;
        color: #ffffff;

        margin: 0;
      }

      .edit-btn::after {
        content: " ";
        border: none;
        outline: none;
      }
    }

    .bottom {
      width: 100%;
      height: 48rpx;
      line-height: 48rpx;

      display: flex;
      flex-flow: row nowrap;
      justify-content: space-evenly;
      align-items: center;

      font-size: 48rpx;
      color: #ffffff;

      image {
        width: 80rpx;
        height: 19rpx;
      }
    }
  }

  .jsyh {
    background: linear-gradient(112deg, #3360d6 0%, #3a93db 100%);
    box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(51, 96, 214, 0.39);
  }

  .nyyh {
    background: linear-gradient(112deg, #3fae7b 0%, #41c198 100%);
  }

  .zsyh {
    background: linear-gradient(112deg, #e84e4e 0%, #e87569 100%);
  }

  .gsyh {
    background: linear-gradient(112deg, #c20909 0%, #d83639 100%);
  }

  .other {
    background: linear-gradient(130deg, #225ed1 0%, #396fd4 100%);
  }
}

// 旧样式 已弃用
// .card {
//   background-color: red;
//   border-radius: 50rpx;
//   padding: 30rpx;
//   position: relative;
//   background: url(../../static/images/bank1.png) 0 0 no-repeat;
//   background-size: cover;
//   margin-bottom: 30rpx;

//   .setting {
//     position: absolute;
//     right: 25rpx;
//     top: 25rpx;
//     width: 50rpx;
//     height: 50rpx;
//   }

//   .cardtitle {
//     display: flex;
//     align-items: center;

//     image {
//       width: 130rpx;
//       height: 100rpx;
//     }

//     > view {
//       margin-left: 45rpx;
//       color: #ffffff;
//       line-height: 60rpx;
//     }
//   }

//   .num {
//     line-height: 90rpx;
//     text-align: center;
//     margin-top: 30rpx;
//     font-size: 45rpx;
//     font-weight: bold;
//     color: #ffffff;
//     letter-spacing: 2rpx;
//   }

//   .check {
//     position: absolute;
//     top: 38rpx;
//     right: 80rpx;

//     .checked {
//       display: flex;
//       align-items: center;
//       font-size: 24rpx;
//       color: #ffffff;
//       line-height: 35rpx;

//       view {
//         width: 35rpx;
//         height: 35rpx;
//         border-radius: 50%;
//         background-color: red;
//         border: 1px solid #f3f3f3;
//         background-color: #f6f6f6;
//         margin-right: 10rpx;
//       }
//     }
//   }
// }

// .no_message {
//   text-align: center;
//   padding: 60rpx;
//   font-size: 25rpx;
//   color: #999999;
// }
</style>
